<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-06-30 09:27:36
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-21 16:36:15
 * @FilePath: \大宗买卖\ebuy\src\views\Main\Supplier\supplier\Carousel\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
  <div class="carousel">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="obj,id in pic_or_video" :key="id">
        <div class="content">
          <img v-lazy="obj.photo_url" v-if="video_or_pic(obj.photo_url)">
          <video v-else :src="url" width="100%" height="100%" controls="true" align='center'></video>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name:'carousel',
  data() {
    return {
      pic_or_video: []
    }
  },
  methods:{
    // 判断是照片还是视频，true:照片，fasle:视频
    video_or_pic:function(url){
        let str = ['.xbm','.tif','pjp','.svgz','jpg','jpeg','ico','tiff','.gif','svg','.jfif','.webp','.png','.bmp','pjpeg','.avif']
        for(var string of str){
          if(url.slice(-string.length) == string){
            return true
          }
        }
        return false
    }
  },
  computed: {
      sid() {
          return this.$store.state.supplier.supplier_id
      }
  },
  watch: {
      sid: {
          immediate: true,
          handler: async function(newVal, oldVal) {
              if (newVal) {
                  await this.$API.getSupplierPhotos().then(res => {
                      if (res.status == 200) {
                        for (let obj of res.data) {
                          if (obj.supplier_id == newVal) this.pic_or_video.push(obj)
                        }
                      }
                  })
              }
          }
      }
  },
}
</script>

<style lang="less" scoped>
.carousel{
  width: 640px;
  margin: 20px auto;
  .el-carousel__item{
    height: 300px;
    .content{
      display: flex;
      justify-content: center;
      img{
         height: 300px;
      }
    }
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
}
</style>